<script setup>
import ChinaMap from "./components/ChinaMap.vue";
import Planet from "./components/Planet.vue";
import LoadOBJFile from "./components/LoadOBJFile.vue";
import LoadGLTFFile from "./components/LoadGLTFFile.vue";
import SkyBox from "./components/SkyBox.vue";
import Path from "./components/Path.vue";
import FlyLine from "./components/FlyLine.vue";
import ChinaMapChild from "./components/ChinaMapChild.vue";
import AnimationMixer from "./components/AnimationMixer.vue";
import KeyCodeEvent from "./components/KeyCodeEvent.vue";
import Collision from "./components/Collision.vue";
import BorderEffect from "./components/BorderEffect.vue";
import Shader from "./components/Shader.vue";
import Pipeline from "./components/Pipeline.vue";
import Water from "./components/Water.vue";
import CameraFollowMove from "./components/CameraFollowMove.vue";
import BoxFollowMove from "./components/BoxFollowMove.vue";

import { ref } from "vue";
const active = ref(0);
</script>

<template>
  <h2 style="color: blue">Three Demo</h2>
  <van-tabs v-model:active="active">
    <van-tab title="中国地图"><ChinaMap title="中国地图" /></van-tab>
    <van-tab title="太阳系"><Planet title="太阳系" /></van-tab>
    <van-tab title="加载OBJ文件渲染模型">
      <LoadOBJFile title="加载OBJ文件渲染模型" />
    </van-tab>
    <van-tab title="加载GLTF文件渲染模型">
      <LoadGLTFFile title="加载GLTF文件渲染模型" />
    </van-tab>
    <van-tab title="添加场景图">
      <SkyBox title="添加场景图" />
      <div>
        注： 1. 场景图的光也会影响到绘制的物体 2. 场景图支持全景图与分片图
      </div>
    </van-tab>
    <van-tab title="轨道运动"><Path title="轨道运动" /></van-tab>
    <van-tab title="飞行轨迹线路"><FlyLine title="飞行轨迹线路" /></van-tab>
    <van-tab title="查看省份">
      <ChinaMapChild title="中国地图 - 点击查看省份 - 目前只有重庆可点击" />
    </van-tab>
    <van-tab title="动画混合器"><AnimationMixer title="动画混合器" /></van-tab>
    <van-tab title="控制键盘控制模型移动和攻击">
      <KeyCodeEvent title="控制键盘控制模型移动和攻击" />
    </van-tab>
    <van-tab title="碰撞检测"><Collision title="碰撞检测" /></van-tab>
    <van-tab title="边界效果"><BorderEffect title="边界效果" /></van-tab>
    <van-tab title="使用着色器材质绘制立方体">
      <Shader title="使用着色器材质绘制立方体" />
    </van-tab>
    <van-tab title="管道流动特效"><Pipeline title="管道流动特效" /></van-tab>
    <van-tab title="水面流动特效">
      <Water title="水面流动特效" />
      <div>注： 1. 案例内涵响应式布局</div>
    </van-tab>
    <van-tab title="镜头跟随物体移动">
      <CameraFollowMove title="镜头跟随物体移动" />
    </van-tab>
    <van-tab title="物体跟随镜头移动">
      <BoxFollowMove title="物体跟随镜头移动" />
    </van-tab>
  </van-tabs>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
